import BackDrop from 'component/BackDrop';
import * as React from 'react';
import { createPortal } from 'react-dom';
import './index.css';
export interface ILoginPortalProps {
}

export interface ILoginPortalState {
  dots:number
}

export default class LoginPortal extends React.Component<ILoginPortalProps, ILoginPortalState> {
  constructor(props: ILoginPortalProps) {
    super(props);

    this.state = {
      dots:1
    }
  }

  dotsTimer:any=null

  componentDidMount() {
    this.dotsTimer=setInterval(()=>{
      if(this.state.dots>=3){
        this.setState({dots:1})
        return
      }
      this.setState({dots:this.state.dots+1})

    },500)
  }

  componentWillUnmount(): void {
    if(this.dotsTimer){
      clearInterval(this.dotsTimer)
    }
  }

  renderDots=()=>{

    let str=""
    for (let index = 0; index < this.state.dots; index++) {
        str+='.'
    }
    return str
  }
  public render() {
    return (
      createPortal(<BackDrop>
        <div id="loginroot">
          <h4>正在登录请稍等{this.renderDots()}</h4>
          <div className="progress">
            <div className="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow={50} aria-valuemin={0} aria-valuemax={100}></div>
          </div>
        </div>
      </BackDrop>, document.body)
    );
  }
}
